<template>
  <div>
    <!-- 顶部区域 -->
    <div style="margin-bottom: 20px;">
      <span>用户Id：</span>
      <el-input v-model.number="searchParams.userId" placeholder="请输入用户Id" style="width: 200px;"></el-input>
      <span style="margin-left: 20px;">用户名：</span>
      <el-input v-model="searchParams.userName" placeholder="请输入用户名" style="width: 200px;"></el-input>
      <el-button type="primary" style="margin-left: 10px;" @click="getLogData">查询</el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="logList" style="width: 100%">
      <el-table-column prop="id" label="Id" width="80"></el-table-column>
      <el-table-column prop="userName" label="用户名" width="120"></el-table-column>
      <el-table-column prop="realName" label="真实姓名" width="120"></el-table-column>
      <el-table-column prop="content" label="动态" min-width="300"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
    </el-table>

    <!-- 底部区域 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :page-size="searchParams.pageSize"
      v-model:current-page="searchParams.pageIndex"
      @size-change="handleSizeChange"
      @current-change="getLogData"
    ></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { LogPageResponse } from '@/api/log'

// 日志响应类型
type LogResponseType = {
  id: number
  userId: number
  userName: string
  realName: string
  content: string
  createTime: string
}

type SubjectPageResponse = {
  total: number
  list: LogResponseType[]
}

interface ApiResponse<T> {
  code: number
  message: string
  response: T
}

// 查询参数
const searchParams = reactive({
  userId: undefined as number | undefined, // 更语义化
  userName: null as string | null,
  pageIndex: 1,
  pageSize: 10
})

const logList = ref<LogResponseType[]>([])
const total = ref<number>(0)

// 获取日志数据
const getLogData = async () => {
  const res = await LogPageResponse(searchParams)
  if (res.code === 1) {
    logList.value = res.response.list
    total.value = res.response.total
  }
}

// 页面大小变化
const handleSizeChange = (size: number) => {
  searchParams.pageSize = size
  getLogData()
}

// 组件挂载后加载数据
onMounted(() => {
  getLogData()
})
</script>

<style scoped>
.el-input {
  margin-right: 10px;
}
</style>
